<template>
    <div class='userinfo'>
        <ul class="userinfo-list">
            <li class="userinfo-list-item">
                <el-icon color="#606266" :size="20">
                    <ElIconAvatar />
                </el-icon>
                <span class="item-text"> {{ userConfigStore.userName }} </span>
            </li>
            <li class="userinfo-list-item" @click="logout">
                <svg-icon icon-class="UserExit" />
                <span class="item-text"> {{ $t('退出账号') }} </span>
            </li>
            <li class="userinfo-list-item">
                <svg-icon icon-class="SwitchCandE" />
                <span class="item-text">
                    <AppTopBar_I18nEntry />
                </span>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { userConfig } from '@/pages/pinia/user/index'
const userConfigStore = userConfig()

const logout = () => {
    userConfigStore.logOut()
}
</script>

<style lang="scss" scoped>
.userinfo {
    max-width: 440px;
    min-width: 140px;
    min-height: 100px;
    padding: 10px;

    &-avtar {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .userinfo-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #fff;
        }
    }

    &-list {
        padding: 0;

        &-item {
            list-style-type: none;
            border-bottom: 1px solid #2A2D37;
            background: #2B2F36;
            display: flex;
            align-items: center;
            height: 40px;
            padding: 0 10px;
            margin-bottom: 4px;

            img {
                width: 16px;
                height: 16px;
            }

            .item-text {
                color: #fff;
                font-size: 16px;
                margin-left: 10px;
            }
        }

        &-item:hover {
            background-color: #525252;
            cursor: pointer;
        }
    }

    &-footer {
        .footer-title {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .footer-user-list {
            background-color: #eee;
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 10px;
            padding: 5px 10px;
            border-radius: 5px;
            display: flex;
            align-items: center;

            &-icon {
                width: 24px;
                height: 24px;
            }

            &-username {
                margin-left: 10px;
            }
        }
    }
}
</style>
<style lang="scss">
.userinfo .app-top-bar-i18n-entry .el-dropdown {
    padding-left: 0;
    padding-right: 0;
}
</style>